<!DOCTYPE html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="./css/cal.css">
      <title>计算器</title>
    
    </head>
    <body>
      <div class="box">
      <div class="box1-1">
         <input type="text" id="inp" disabled/>
      </div>
      <div class="box2-1">
         <button onclick="clr();">Clr</button>
         <button onclick="back();">Del</button>
         <button onclick="cal();">=</button>
      </div> 
      <div class="box1-2">
         <button onclick="addStr(1);">1</button>
         <button onclick="addStr(2);">2</button>
         <button onclick="addStr(3);">3</button><br/>
         <button onclick="addStr(4);">4</button>
         <button onclick="addStr(5);">5</button>
         <button onclick="addStr(6);">6</button><br/>
         <button onclick="addStr(7);">7</button>
         <button onclick="addStr(8);">8</button>
         <button onclick="addStr(9);">9</button><br/>
         <button onclick="addStr(0);">0</button>
         <button onclick="addStr('.');">.</button>
         <button onclick="addStr('/');">/</button><br/>
       </div>
       <div class="box1-3">
         <button onclick="addStr('+');">+</button>
         <button onclick="addStr('-');">-</button>
         <button onclick="addStr('*');">*</button>
       </div>
       </div>
    <script>
        function addStr(s){
            var inp=document.getElementById('inp');
            inp.value=inp.value+s;
        }
        function cal(){
            var inp=document.getElementById('inp');
            val=eval(inp.value);
            inp.value=val;
        }
        function clr(){
            var inp=document.getElementById('inp');
            inp.value='';
        }
        function back(){
            var inp=document.getElementById('inp');
            var str=inp.value.substr(0,inp.value.length-1);
            inp.value=str;
        }
    </script>
</body>
</html>
